<template>
	<view class="page">
		<u-navbar title="注册新账号" :placeholder="true" :titleStyle="titleStyle" leftIconColor="#fff" :bgColor="bgColor"
			:autoBack="true"></u-navbar>

		<view class="login_form">
			<view class="list">
				<view class="label main-text-color">用户名</view>
				<u--input type="text" fontSize="15" border="none" placeholder="必填" v-model="form.username"></u--input>
			</view>
			<view class="list">
				<view class="label main-text-color">手机号</view>
				<u--input type="number" maxlength="11" fontSize="15" border="none" placeholder="请输入手机号"
					v-model="form.phone"></u--input>
			</view>
			
			
			<view class="list">
				<view class="label main-text-color">验证码</view>
				<u--input type="number" fontSize="15" border="none" placeholder="请输入验证码" v-model="form.phoneCode"></u--input>
				<span style="margin-right: 20rpx;color: #08C060;"  @tap="getCode" :text="tips">{{tips}}</span>
			</view>

			<view class="list">
				<view class="label main-text-color">密码</view>
				<u--input type="password" fontSize="15" border="none" placeholder="请输入至少6位密码"
					v-model="form.password"></u--input>
			</view>

			<view class="list">
				<view class="label main-text-color">确认密码</view>
				<u--input type="password" fontSize="15" border="none" placeholder="请输入确认密码"
					v-model="form.rePassword"></u--input>
			</view>
			
			<view class="list" @click="dateVisible1 = true">
				<view class="label main-text-color">出生日期</view>
				<span
					:class="form.birthday?'birthDayTextact':'birthDayText'">{{form.birthday?form.birthday:'选填'}}</span>
			</view>

			<view class="list">
				<view class="label main-text-color">昵称</view>
				<u--input type="text" fontSize="15" border="none" placeholder="选填" v-model="form.nickname"></u--input>
			</view>

			<view class="list">
				<view class="label main-text-color">真实姓名</view>
				<u--input type="text" fontSize="15" border="none" placeholder="选填" v-model="form.realname"></u--input>
			</view>
			<view class="list">
				<view class="label main-text-color">所在地址</view>
				<u--input type="text" fontSize="15" border="none" placeholder="选填" v-model="form.location"></u--input>
			</view>
			<view class="list">
				<view class="label main-text-color">性别</view>
				<u-radio-group v-model="form.sex">
					<u-radio activeColor="#08c060" style="margin-right: 20rpx;" name="male" label="男"></u-radio>
					<u-radio activeColor="#08c060" name="female" label="女"></u-radio>
				</u-radio-group>
			</view>
			<!-- <view class="list">
				<div class="form_label">
					<span class="red">*</span>
					性别
				</div>
				
			</view> -->
		</view>

		<view class="agree" @click="agreeCheck = !agreeCheck">
			<image v-if="agreeCheck" src="../../static/images/radio_check.png" mode="widthFix"></image>
			<image v-else src="../../static/images/radio.png" mode="widthFix"></image>
			<view class="agree_text grey">
				我已阅读并同意我和我的家
				<span class="main-text-color" @click.stop="toPage('/pages/register/xieyi')">用户协议</span>
				和
				<span class="main-text-color" @click.stop="toPage('/pages/register/yinsi')">隐私政策</span>
			</view>
		</view>

		<view class="loginBtn main-bg-color" @click="submit">注 册</view>

		<!-- <view style="color: red;padding:20rpx 30rpx">
				强烈建议绑定微信 可以使用微信登录
		</view> -->

		<u-code :seconds="seconds" ref="uCode" @change="codeChange"></u-code>

		<w-picker :visible.sync="dateVisible1" mode="date" startYear="1920" endYear="2099" :current="false"
			fields="day" @confirm="onConfirm($event,'date1')" :disabled-after="false" ref="date1"></w-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dateVisible1: false,
				bgColor: '#08C060',
				titleStyle: {
					color: '#fff'
				},
				form: {
					username: '',
					password: '',
					realname: '',
					rePassword: '',
					nickname: "",
					sex: 'female',
					provider: '',
					openId: '',
					location: '',
					code:'',
					phoneCode:'',
					phone:'',
					birthday: ''
				},
				agreeCheck: false,
				tips: '',
				seconds: 60,
				realyzm:''
			};
		},
		onLoad(e) {
			console.log(e)
			if (e.code) {
				this.form.code = e.code? e.code:''
				this.form.openId = e.openId?e.openId:''
				this.form.provider = e.provider
			}
			console.log(this.form)
		},
		methods: {
			onConfirm(e) {
				this.form.birthday = e.result
			},
			toPage(url) {
				uni.navigateTo({
					url
				});
			},
			submit() {
				if (this.form.phone == '') {
					return this.$Show.show('请输入手机号')
				}
			

				if (!this.$utils.checkModbile(this.form.phone)) {
					return this.$Show.show('手机号格式不正确')
				}
				
				
				if (this.form.phoneCode == '') {
					return this.$Show.show('请输入验证码')
				}

				if (this.form.username == '') {
					return this.$Show.show('请输入用户名')
				}
				
				if (!this.$utils.checkusername(this.form.username)) {
					return this.$Show.show('用户名只包含英文、数字和下划线，首尾不能有下划线')
				}
			
				// if (this.form.birthday == '') {
				// 	return this.$Show.show('请选择出生日期')
				// }

				if (this.form.password == '' || this.form.password.length < 6) {
					return this.$Show.show('密码格式不正确')
				}

				if (this.form.password != this.form.rePassword) {
					return this.$Show.show('两次密码不一致')
				}


				if (!this.agreeCheck) {
					return this.$Show.show('请勾选用户协议及隐私政策')
				}
				
				// if(this.realyzm != this.form.code){
				// 	this.form.code = ''
				// 	return this.$Show.show('验证码错误')
				// }

				if (this.form.nickname == '') {
					this.form.nickname = this.form.username
				}
				
				console.log(this.form)
				this.$api.registerAndLogin(this.form).then(res => {
					console.log(res)
					// this.$Show.successJump('注册成功')
					uni.setStorageSync('token',res.token)
					uni.setStorageSync('familyId',res.familyIds)
					uni.setStorageSync('nickname',res.nickname)
					uni.setStorageSync('username',res.username)
					
					uni.setStorageSync('userNewCalendar',res.userNewCalendar)
					
					uni.reLaunch({
						url:'/pages/tabbar/index/index'
					})
				})
			},

			//验证码相关
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				
				if(!this.$utils.checkModbile(this.form.phone)){
					return this.$Show.show('手机号格式不正确')
				}
				
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					});
				
					
					this.$api.getPhoneCode({phone:this.form.phone}).then(res=>{
						uni.$u.toast('验证码已发送');
						console.log(res)
						// this.realyzm = res
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},

		}
	};
</script>

<style lang="scss">
	.birthDayTextact {
		color: #333;
		font-size: 30rpx;
	}

	.birthDayText {
		color: #b5b5b5;
		font-size: 30rpx;
	}

	.login_form {
		background-color: #fff;
		margin-top: 30rpx;

		.list {
			display: flex;
			align-items: center;
			height: 100rpx;
			border-bottom: 1px solid #f8f8f8;
			position: relative;

			.label {
				width: 170rpx;
				text-align: right;
				margin-right: 20rpx;
			}

			.sendCode {
				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 180rpx;
				height: 60rpx;
			}
		}

		.list:last-child {
			border: none;
		}
	}

	.agree {
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		margin: 30rpx 0;

		image {
			width: 45rpx;
			height: 45rpx;
			margin-right: 10rpx;
		}

		span {
			text-decoration: underline;
		}
	}

	.loginBtn {
		width: 690rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		margin: 0 auto;
		margin-top: 40rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
	}
</style>